<template>
  <el-dialog v-model="isShow" draggable width="720" :close-on-click-modal="false">
    <template #header>
      批量处理{{data.title}}
    </template>
    <!-- <p>{{data.ids}}</p> -->
    <div class="content">
      <i class="title">当前选中{{data.data.length}}{{data.title}}</i>
      <div class="names scroll-base">
        <el-tag class="name" closable @close="delBatchItem(item._id)"
          :type="data.alarm?'danger':'success'" 
          v-for="item in data.data" :key="item._id">
          {{item.name}}
        </el-tag>
      </div>
      <div class="item" v-if="'client,operator,model'.indexOf(data.flag) >= 0"> 
        <el-form-item :label="selectInfo.title">
          <el-select
            v-model="selectInfo.name"
            filterable
            remote
            reserve-keyword
            :placeholder="selectInfo.placeholder"
            remote-show-suffix
            :remote-method="getSelectOptions"
            :loading="loading"
            @change="selectChange"
          >
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.name"
              :value="item._id"
            />
          </el-select>
          <el-button type="primary" @click="selectSet" style="margin: 0 15px;" :loading="loading">设置</el-button>
        </el-form-item>
      </div>
      <div class="item" v-if="'client,operator,rom,model'.indexOf(data.flag) >= 0"> 
        <el-form-item :label="'批量设置'+data.title+'状态为'">
          <el-button type="danger" @click="msgBox(cStatus[1],'修改状态为'+cStatus[1])" style="margin: 0;border-radius:5px 0 0 5px;" :loading="loading">{{cStatus[1]}}</el-button>
          <el-button type="success" @click="msgBox(cStatus[0],'修改状态为'+cStatus[0])" style="margin: 0;border-radius: 0 5px 5px 0;" :loading="loading">{{cStatus[0]}}</el-button>
        </el-form-item>
      </div>
    </div>
    <template #footer>
      <div class="footer">
        <el-button @click="close()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue-demi";
import { ElMessageBox, ElNotification } from 'element-plus';
import util from '@/assets/js/util';
import http from '@/axios/http';
export default {
  setup(props, ctx) {
    const Global = getCurrentInstance().proxy
    let isShow = ref(false);
    let cStatus = ref(Global.$const.STATUS_DATA);
    let data = reactive({
      flag: '',
      title: '',
      ids: [],
      data: [],
      types: [],
      status: '',
      alarm: false,
    })

    function open(e) {
      let m = ''
      data.flag = e.flag
      data.data = e.data
      data.alarm = false
      let d = e.data
      if (d.length <= 0) m = '请先选择记录'
      if (isNull(m)) {
        let ids = [],types = []
        for(let i in d) {
          ids.push(d[i]._id)
          types.push(d[i].type)
        }
        data.ids = util.distinctArr(ids)
        data.types = util.distinctArr(types)
      }
      if (isNull(m)) {
        selectInfo.id = ''
        selectInfo.name = ''
        if (data.flag == 'client' || data.flag == 'operator') {
          data.title = data.flag == 'client'?'用户':'操作员'
          selectInfo.title = '批量选择所属用户'
          selectInfo.placeholder = '请输入用户名称关键字查询'
        }
        if (data.flag == 'rom') data.title = '固件'
        if (data.flag == 'model') {
          data.title = '设备型号'
          selectInfo.title = '批量选择使用固件'
          selectInfo.placeholder = '请输入固件名称关键字查询'
        }
        isShow.value = true;
      } else {
        ElNotification({
          type: 'warning',
          title: '批量处理',
          message: m
        })
      }
    }

    function close() {
      isShow.value = false;
    }

    function done() {
      ctx.emit("done", null);
      isShow.value = false;
    }

    function delBatchItem(id) {
      let d = data.data
      for(let i in d) {
        if (id == d[i]._id) {
          d.splice(i,1)
          data.ids.splice(i,1)
        }
      }
    }

    // 查询所属用户/使用固件
    let selectInfo = reactive({
      id: '',
      name: '',
      title: '',
      placeholder: '',
    });
    let selectOptions = ref([]);
    let loading = ref(false);
    async function getSelectOptions(query) {
      if (!util.isNull(query)) {
        let g = {};
        g.name = query;
        g.status = cStatus.value[0]
        loading.value = true;
        let r = null
        if (data.flag == 'client' || data.flag == 'operator') {
          r = await http.getClients(g);
        }
        if (data.flag == 'model') {
          r = await http.getRoms(g);
        }
        loading.value = false;
        if (r && r.code == 10000) {
          selectOptions.value = r.data;
        }
      } else {
        selectOptions.value = [];
      }
    }
    function selectChange(e) {
      selectInfo.id = e;
    }
    // 批量设置所属用户
    async function selectSet() {
      let m = ''
      let sId = selectInfo.id
      if (isNull(sId)) {
        if (data.flag == 'client' || data.flag == 'operator') m = '请先选择所属用户'
        if (data.flag == 'model') m = '请先选择使用固件'
      }
      if (!isNull(m)) {
        ElNotification({
          type: 'warning',
          title: '批量设置失败',
          message: m
        })
        return
      }
      let p = {}
      p.ids = data.ids
      let r = null
      loading.value = true
      if (data.flag == 'client') {
        p.upLevelId = sId
        r = await http.batchClient(p)
      }
      if (data.flag == 'operator') {
        p.clientId = sId
        r = await http.batchOper(p)
      }
       if (data.flag == 'model') {
        p.romId = sId
        r = await http.batchModel(p)
      }
      loading.value = false
      if (r && r.code == 10000) {
        done()
      }
    }

    // 批量设置状态
    async function statusSet(v) {
      let p = {}
      p.ids = data.ids
      let r = null
      p.status = v
      loading.value = true
      if (data.flag == 'client') {
        r = await http.batchClient(p)
      }
      if (data.flag == 'operator') {
        r = await http.batchOper(p)
      }
      if (data.flag == 'rom') {
        r = await http.batchRom(p)
      }
      if (data.flag == 'model') {
        r = await http.batchModel(p)
      }
      loading.value = false
      if (r && r.code == 10000) {
        done()
      }
    }

    // 确认msgBox
    function msgBox(flag,msg,title='是否确认？',cbt='确认') {
      ElMessageBox.confirm(msg, title, {
        confirmButtonText: cbt,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (cStatus.value.indexOf(flag)>=0) statusSet(flag);
        })
        .catch(() => {});
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      isShow, data,
      open, close, done, delBatchItem,
      cStatus, selectInfo, selectOptions, loading, getSelectOptions, selectChange, selectSet,
      statusSet,
       msgBox, isNull,
    };
  },
};
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  .title{
    font-style: normal;
  }
  .names {
    padding: 5px;
    max-height: 90px;
    overflow-y: auto;
    .name {
      margin: 3px;
    }
  }
  .item{
    padding: 10px 0;
    padding-top: 20px;
    .el-form-item{
      margin: 0;
    }
  }
  .row{
    display: flex;
    flex-direction: row;
    .danger{
      color: $color-error;
    }
  }
}
.footer{
  @extend %view-flex;
  flex-direction: row;
}
</style>